<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>保持宽高比的容器</title>
	<style>
		.box {
			width: 100%;
			height: 0;
			padding-bottom: 48%;
			position: relative;
		}

		.box iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<div class="box">
		<iframe width="420" height="315"
			src="https://www.bilibili.com"
			frameborder="0" allowfullscreen></iframe>
	</div>
</body>

</html>